<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
    // this page is a demo that is not built, so fudge the module.exports support
    // define a global `module` so that the actual source file can use it
    window.module = {};
    </script>
    <script src="confetti.js"></script>
    <script>
    // define the `module.exports` as the `confetti` global, the way that the
    // cdn distributed file would
    window.confetti = module.exports;
    </script>
</head>

<body>
    <script>
    var editors = [];
    var modes = {
        cannon: function cannon() {
            confetti({
                particleCount: 100,
                spread: 70,
                origin: { y: 0.6 }
            });
        },
        random: function random() {
            function randomInRange(min, max) {
                return Math.random() * (max - min) + min;
            }

            confetti({
                angle: randomInRange(55, 125),
                spread: randomInRange(50, 70),
                particleCount: randomInRange(50, 100),
                origin: { y: 0.6 }
            });
        },
        realistic: function realistic() {
            var count = 200;
            var defaults = {
                origin: { y: 0.7 }
            };

            function fire(particleRatio, opts) {
                confetti(Object.assign({}, defaults, opts, {
                    particleCount: Math.floor(count * particleRatio)
                }));
            }

            fire(0.25, {
                spread: 26,
                startVelocity: 55,
            });
            fire(0.2, {
                spread: 60,
            });
            fire(0.35, {
                spread: 100,
                decay: 0.91,
                scalar: 0.8
            });
            fire(0.1, {
                spread: 120,
                startVelocity: 25,
                decay: 0.92,
                scalar: 1.2
            });
            fire(0.1, {
                spread: 120,
                startVelocity: 45,
            });
        },
        fireworks: function fireworks() {
            var duration = 15 * 1000;
            var animationEnd = Date.now() + duration;
            var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

            function randomInRange(min, max) {
                return Math.random() * (max - min) + min;
            }

            var interval = setInterval(function() {
                var timeLeft = animationEnd - Date.now();

                if (timeLeft <= 0) {
                    return clearInterval(interval);
                }

                var particleCount = 50 * (timeLeft / duration);
                // since particles fall down, start a bit higher than random
                confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
                confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
            }, 250);
        },
        snow: function snow() {
            var duration = 15 * 1000;
            var animationEnd = Date.now() + duration;
            var skew = 1;

            function randomInRange(min, max) {
                return Math.random() * (max - min) + min;
            }

            (function frame() {
                var timeLeft = animationEnd - Date.now();
                var ticks = Math.max(200, 500 * (timeLeft / duration));
                skew = Math.max(0.8, skew - 0.001);

                confetti({
                    particleCount: 1,
                    startVelocity: 0,
                    ticks: ticks,
                    origin: {
                        x: Math.random(),
                        // since particles fall down, skew start toward the top
                        y: (Math.random() * skew) - 0.2
                    },
                    colors: ['#ffffff'],
                    shapes: ['circle'],
                    gravity: randomInRange(0.4, 0.6),
                    scalar: randomInRange(0.4, 1),
                    drift: randomInRange(-0.4, 0.4)
                });

                if (timeLeft > 0) {
                    requestAnimationFrame(frame);
                }
            }());
        },
        continuous: function continuous() {
            var end = Date.now() + (2 * 1000);

            // go Buckeyes!
            var colors = ['#bb0000', '#ffffff'];

            (function frame() {
                confetti({
                    particleCount: 2,
                    angle: 60,
                    spread: 55,
                    origin: { x: 0 },
                    colors: colors
                });
                confetti({
                    particleCount: 2,
                    angle: 120,
                    spread: 55,
                    origin: { x: 1 },
                    colors: colors
                });

                if (Date.now() < end) {
                    requestAnimationFrame(frame);
                }
            }());
        },
        custom: function() {
            var canvas = document.getElementById('my-canvas');

            // you should  only initialize a canvas once, so save this function
            // we'll save it to the canvas itself for the purpose of this demo
            canvas.confetti = canvas.confetti || confetti.create(canvas, { resize: true });

            canvas.confetti({
                spread: 70,
                origin: { y: 1.2 }
            });
        }
    };

    function getCode(name) {
        // pretty-print the code, since we will use minified code in production
        var code = modes[name].toString();
        // take out the function wrapper, trim all whitespace
        code = code.split('\n').slice(1).slice(0, -1).map(function(s) {
            return s.trim();
        }).join('\n');
        // pretty-print again
        return code;
    }

    window.onload = function() {
        try {
            eval(getCode("continuous"));
        } catch (e) {
            console.error(e);
        }
    };
    </script>
</body>

</html>